<template>
  <div class="container">
    <!--    开始时间-->
    <van-cell title="就读时间-入学年月" required/>
    <div class="input_">
      <van-field
        is-link
        readonly
        clickable
        name="start_date"
        :value="value1"
        placeholder="--请选择--"
        @click="showPicker1 = true"
        :rules="[{ required: true, message: '请选择入学时间' }]"
      />
    </div>
    <van-popup v-model="showPicker1" position="bottom" :style="{ height: '40%' }" round>
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="开始时间"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @confirm="confirm1"
      />
    </van-popup>
    <!--    结束时间-->
    <van-cell title="就读时间-毕业年月" required/>
    <div class="input_">
      <van-field
        is-link
        readonly
        clickable
        name="end_date"
        :value="value2"
        placeholder="--请选择--"
        @click="showPicker2 = true"
        :rules="[{ required: true, message: '请选择毕业时间' }]"
      />
    </div>
    <van-popup v-model="showPicker2" position="bottom" :style="{ height: '40%' }" round>
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="结束时间"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @confirm="confirm2"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'Date',
  data () {
    return {
      value1: '',
      value2: '',
      showPicker1: false,
      showPicker2: false,
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date()
    }
  },
  methods: {
    confirm1 (time) {
      this.value1 = time.getFullYear() + '年' + (time.getMonth() + 1) + '月' + time.getDate() + '日'
      this.showPicker1 = false
    },
    confirm2 (time) {
      this.value2 = time.getFullYear() + '年' + (time.getMonth() + 1) + '月' + time.getDate() + '日'
      this.showPicker2 = false
    },
    formatter (type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      }
      return val
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .van-cell {
  padding: 5px 16px;
  border-radius: 8px;
}

.container {
  padding: 5px 10px;
}

.input_ {
  border: 1px solid #cccccc;
  border-radius: 8px;
}
</style>
